<script>
import {getartical} from '../api'
export default {
    name:'index',
    data(){
        return{
            daily:[
                // {
                //     content:'<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=470 height=86 src="//music.163.com/outchain/player?type=2&id=528271152&auto=0&height=66"></iframe>',
                //     text:'Warriors of the Night (Datsik/Virtual Riot)',
                //     tags:['dubstep'],
                //     time:'2019/08/03'
                // },
                // {
                //     content:'<img src="static/demo1.jpg" width="100%" alt="">',
                //     text:'结婚',
                //     tags:['重庆'],
                //     time:'2018-03-05'
                // },
                // {
                //     content:'<img src="static/demo2.jpg" width="100%" alt="">',
                //     text:'洗完澡没戴眼镜下楼找药店买云南白药',
                //     tags:['焦距之外','成都'],
                //     time:'2018-03-05'
                // }
            ]
        }
    },
    created(){
        getartical().then(res=>{
            if(res.status===200){
                this.daily = res.data.reverse()
            }
        })
    },
    methods:{
        goto(hash){
            this.$router.push({path:'/detail/'+hash})
        }
    }
}
</script>
<template>
    <div class="index-page">
        <template
        v-for="(i,k) in daily"
        >
            <div 
            class="daily-photo"
            :key='k'
            >
                <div class="cont">
                    <div class="pic" v-html="i.content"
                    @click='goto(i.hash)'
                    >
                        
                    </div>
                    
                    <div class="text" @click='goto(i.hash)'>
                        <p>{{i.text}}</p>
                    </div>
                    <div class="tags">
                        <a 
                        v-for="(tag,tagk) in i.tags" 
                        class="tag-link"
                        :key="`tag${tagk}`"
                        >#{{tag}}</a>
                    </div>
                    
                </div>
                <div class="info" @click='goto(i.hash)'>{{new Date(i.CreateTime*1000).toLocaleDateString()}}</div>
            </div>
        </template>    
    </div>
</template>
<style lang="stylus" scoped>
.index-page
    min-height 600px
.daily-photo
    padding: 45px 25px 15px;
    border-bottom: 1px solid #e6e6e6;
    .pic>img 
        width 100%
        cursor pointer;
    .text>p
        font-size 12px 
        color #666
    .info 
        color #a1a1a1;
        font-size 12px
        cursor pointer;
        user-select none
        &:hover 
            color #666
    .tag-link
        color #a1a1a1;
        font-size 12px
        cursor pointer;
        user-select none
        margin-right 12px
        &:hover 
            color #666
</style>

